<template>
	<div>
		<ul>
			<!-- 导航区 -->
			<li v-for="m in messageList" :key="m.id">
				<!-- to的字符串写法（不传参时，推荐） -->
				<!-- <router-link :to="`/home/message/detail?id=${m.id}&title=${m.title}&content=${m.content}`"> -->

				<!-- to的对象写法（若传参，推荐使用） -->
				<router-link 
					:to="{
						path:'/home/message/detail',
						query:{
							id:m.id,
							title:m.title,
							content:m.content
						}
					}"
				>
					{{m.title}}
				</router-link>
			</li>
		</ul>
		<hr>
		<!-- 展示区 -->
		<router-view/>
	</div>
</template>

<script>
	export default {
		name:'Message',
		data() {
			return {
				messageList:[
					{id:'joisdfy3246',title:'你早起，我早起',content:'我们迟早在一起！'},
					{id:'joisdfy3247',title:'你今天有点怪啊',content:'怪可爱的！'},
					{id:'joisdfy3248',title:'我在寻找一匹马',content:'你的微信号码！'},
					{id:'joisdfy3249',title:'如果爱，请深爱',content:'如果不爱 请别伤害'}
				]
			}
		},
	}
</script>